<template>
  <view class="container">
    <button
      open-type="chooseAvatar"
      @chooseavatar="onChooseAvatar"
      class="boxPanel flex-between"
      hover-class="cell-hover"
    >
      <!-- <view class="boxpanel p-t-10 p-b-10 p-l-30 p-r-30 flex-between" @click="editAvatar()"> -->
      <view class="name">头像</view>
      <view class="row-right" style="flex: 1">
        <image
          :src="$util.img(avatar)"
          mode=""
          class="avatar"
          v-if="avatar"
        ></image>
        <image
          :src="$util.img('/image/avatar.png')"
          mode=""
          class="avatar"
          v-else
        ></image>
        <u-icon name="arrow-right" color="#788096" size="14"></u-icon>
      </view>
      <!-- </view> -->
    </button>

    <view class="boxPanel flex-between">
      <view class="name">昵称</view>
      <view class="row-right" style="flex: 1">
        <input
          type="nickname"
          placeholder="请输入"
          v-model="nickname"
          class="inputs"
          style="text-align: right"
        />
        <image :src="$util.img('/image/edit.png')" mode="" class="edit"></image>
      </view>
    </view>

    <view class="boxPanel flex-between">
      <view class="name">手机号</view>
      <view class="row-right" style="flex: 1">
        <text class="text-bold">{{ userInfo.mobile }}</text>
      </view>
    </view>

    <view class="boxPanel flex-between">
      <view class="name">注册时间</view>
      <view class="row-right" style="flex: 1">
        <text
          class=""
          style="display: inline-block; width: 67%; text-align: right"
          >{{ userInfo.reg_time | formateTime }}</text
        >
      </view>
    </view>

    <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
      <view class="submit" @click="submitInfo()">保存</view>
    </view>
  </view>
</template>

<script>
import config from "@/common/js/config.js";
export default {
  data() {
    return {
      isIphoneX: false, //判断手机是否是iphoneX以上
      nickname: "",
      avatar: "",
      userInfo: {},
    };
  },
  filters: {
    formateTime(value) {
      console.log(value);
      // 返回形式几年几月几日时分秒
      if (!value) {
        return "";
      }
      value = value * 1000; //时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return (
        year + "年" + month + "月" + day + "日" + " " + hour + ":" + minute
      );
    },
  },
  onLoad() {
    this.isIphoneX = this.$util.uniappIsIPhoneX();
    if (uni.getStorageSync("userInfo")) {
      this.userInfo = uni.getStorageSync("userInfo");
      //赋值
      this.nickname = this.userInfo.nickname;
      this.avatar = this.userInfo.headimg;
    }
  },
  methods: {
    editAvatar() {
      var that = this;
      this.$util.upload(1, {}, (res) => {
        this.avatar = res[0];
      });
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      var that = this;
      uni.uploadFile({
        url: config.baseUrl + "/api/upload/headimg",
        filePath: avatarUrl,
        name: "file",
        formData: {
          token: uni.getStorageSync("token"),
          app_type: "weapp",
          app_type_name: "微信小程序",
        },
        success: function (res) {
          var path_str = JSON.parse(res.data);
          if (path_str.code >= 10067) {
            // var img = that.$util.img(path_str.data.pic_path);
            that.avatar = path_str.data.pic_path;
          } else {
            that.$util.showToast({ title: "上传失败" });
          }
        },
      });
    },
    submitInfo() {
      if (!this.nickname) {
        this.$util.showToast({ title: "昵称不能为空" });
        return;
      }

      // 先执行修改头像-在修改昵称
      this.$api.sendRequest({
        url: "/api/member/modifyheadimg",
        data: {
          headimg: this.avatar,
        },
        success: (res) => {
          if (res.code == 0) {
            this.editNickName();
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    editNickName() {
      this.$api.sendRequest({
        url: "/api/member/modifynickname",
        data: {
          nickname: this.nickname,
        },
        success: (res) => {
          if (res.code == 0) {
            this.$util.showToast({ title: "已修改" });
            uni.navigateBack({
              delta: 1,
            });
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.name {
  color: #1a264f;
}
.row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .avatar {
    width: 82rpx;
    height: 82rpx;
    border-radius: 50%;
  }
  .rightimg {
    width: 8rpx;
    height: 14rpx;
    margin-left: 20rpx;
  }
  .edit {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
  }
}

.logout {
  margin: 300rpx 30rpx 20rpx;
  border-radius: 20rpx;
  height: 95rpx;
  line-height: 95rpx;
  text-align: center;
  color: #fff;
  background-color: $color-title2;
}
</style>
